/* eslint-disable no-nested-ternary */
/* eslint-disable react/no-danger */
import React from 'react';
import {
  Card,
  Button,
  Spin,
  Anchor,
  Row,
  Col,
  Table,
  Modal,
  Steps,
  Badge,
  Popover,
  Divider,
  Form,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import downloadFile, { getFileName } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import HdlRemark from '@/pages/components/HdlRemark';
import InsAccoModal from '../../components/InsAccoModal';
import AccuAccoModal from '../../components/AccuAccoModal';
import InjSecAccoDetailModal from '../../components/InjSecAccoDetailModal';
import Policy from '../../components/PolicyDetail';

const { Step } = Steps;
const { Description } = DescriptionList;
const { Link } = Anchor;

@connect(({ addempdetail, loading, publicdata }) => ({
  loading: loading.models.addempdetail,
  dataList: addempdetail.dataList,
  addempdetail,
  dictCode: publicdata.dictCode,
}))
class AddEmployeeDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      taskSource: null,
      stepDirection: 'horizontal',
      maistrue: false,
      activeKeyUrl: '/empSendCreateService/querySerSetDetail',
      activeKey: '1',
      moreFlagList: ['2', '2'],
      taskId: null,
      scroll: { x: 2200 },
      accuOrIns: null,
      pdId: null,
      plcyId: null,
      cityId: null,
      policyVisible: false,
    };
  }

  componentDidMount() {
    const {
      dispatch,
      location: { query },
    } = this.props;
    const newquery = {
      addTaskId: query.addTaskId,
    };
    // 获取详情信息
    dispatch({
      type: 'addempdetail/fetchAddEmpDetail',
      payload: newquery,
    });
    this.setState({
      taskSource: query.taskSource || null,
      taskId: query.addTaskId,
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const resetInfo = {
      responseAddAssBaseDto: {}, // 基本信息
      responseAddAssSendDto: {}, // 派单信息
      responseDeduAssDto: {}, // 已经减少的险种
      chargeDto: {}, // 收费信息、
      rsponseDeduPdDto: {}, // 产品信息
      handDto: [], // 	办理备注
      proRecord: [], // 问题记录
      recordList: [], // 联系记录
      dataDtos: [], // 材料信息
      progressList: [], // 执行状态
      serDto: {}, // 社保公积金信息
      basicSerDto: {},
      responseAddAssDto: {}, // 新增险种信息
      changeQuoDto: {}, // 新增产品信息（报价单）
      execStatusDto: {}, // 执行状态
      dataDetailed: [], // 社保公积金缴纳明细
      laborContDto: {} // 合同信息
    };
    dispatch({
      type: 'addempdetail/updateModelData',
      payload: { ...resetInfo },
    });
  }

  commanName = item => (item.inpVal ? item.inpVal : '--');

  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <span key={item}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </span>
      );
    });

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  detailed = () => {
    this.setState({
      maistrue: true,
    });
    this.changeTabPane('1');
  };

  // 获取列表数据
  getList = () => {
    const { dispatch } = this.props;
    const { moreFlagList, activeKey, taskId } = this.state;
    const params = {
      taskId,
      moreFlag: moreFlagList[parseInt(activeKey, 10) - 1],
    };
    dispatch({
      type: 'addempdetail/fetchAddEmpDetailed',
      payload: params,
    });
  };

  getVal = value => {
    if (value.inpVal) {
      if (value.inpType && value.inpType === 9 && value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (value.inpType && value.inpType === 9 && value.inpVal === '[]') {
        return '--';
      }
      return this.commanName(value);
    }
    return '--';
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { nowPage } = this.state;
    switch (activeKey) {
      case '1':
        this.state.activeKeyUrl = '/empSendCreateService/querySerSetDetail';
        break;
      case '2':
        this.state.activeKeyUrl = '/empSendCreateService/querySerOrdProdDetail';
        break;
      default:
        this.state.activeKeyUrl = '/empSendCreateService/querySerSetDetail';
        break;
    }
    this.state.activeKey = activeKey;
    this.state.dataSource = [];
    this.state.nowPage = 1;
    this.getList(nowPage, 10);
  };

  handleOk = () => {
    this.setState({
      maistrue: false,
    });
  };

  // 获取政策组合信息
  getPolicyDetail = record => {
    this.cancelPolicyModal(true);
    this.setState({
      accuOrIns: record.ass && record.ass === 2 ? 2 : 1,
      pdId: record.ass && record.ass.toString(),
      plcyId: record.grpId,
      cityId: record.cityId,
    });
  };

  // 控制政策组件的显示隐藏
  cancelPolicyModal = modalClose => {
    this.setState({ policyVisible: modalClose });
  };

  // 获取社保，公积金，工伤二级户的详情
  getAccoDetail = record => {
    if (record.ass && record.ass === 5) {
      // 区分是工伤二级户还是社保大库 （injFlag）
      if (record.injFlag && record.injFlag === 1) {
        // 石家庄工伤二级户
        // 工伤二级户
        this.injSecAccoDetail.getinjSecAccoDetail(1, 10, record.accoId);
      } else {
        // 社保
        this.insDetail.getInsDetail(record.accoId, record.payWay);
      }
    } else if (record.ass && record.ass === 2) {
      // 公积金
      this.accuDetail.getAccuDetail(record.accoId, record.payWay);
    } else {
      // 社保
      this.insDetail.getInsDetail(record.accoId, record.payWay);
    }
  };

  render() {
    const {
      loading,
      addempdetail: {
        responseAddAssBaseDto, // 基本信息
        responseAddAssSendDto, // 派单信息
        responseDeduAssDto, // 减少险种信息
        chargeDto, // 收费信息
        handDto, // 办理备注
        proRecord, // 问题记录
        dataDtos, // 材料信息
        serDto, // 社保公积金信息
        laborContDto:{responseLaborCont = {}}, // 合同信息
        responseAddAssDto, // 新增险种信息
        changeQuoDto, // 新增产品信息（报价单）
        dataList,
        execStatusDto, // 执行状态
        dataDetailed, // 社保公积金缴纳明细
        coltFlag = 1, // 是否需要材料信息
      },
    } = this.props;
    // const { responseLaborCont = {} } = laborContDto
    const {
      taskSource,
      stepDirection,
      maistrue,
      scroll,
      accuOrIns,
      pdId,
      plcyId,
      cityId,
      policyVisible,
    } = this.state;
    // 社保公积金表格
    const insAccuInfoColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onCell: () => ({ style: { width: '100px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '100px' } }),
        fixed: 'left',
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        sorter: (a, b) => new Date(b.beginYm) - new Date(a.beginYm),
        onCell: () => ({ style: { width: '140px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '140px' } }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-01') : '--'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        sorter: (a, b) => new Date(b.endYm) - new Date(a.endYm),
        onCell: () => ({ style: { width: '140px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '140px' } }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业固定金额',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人固定金额',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '政策组合',
        dataIndex: 'grpName',
        width: 200,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <a onClick={() => this.getPolicyDetail(record)}>{text || '--'}</a>
        ),
      },
      {
        title: '缴纳账户',
        dataIndex: 'accoName',
        width: 200,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => <a onClick={() => this.getAccoDetail(record)}>{text || '--'}</a>,
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onCell: () => ({ style: { width: '120px' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: '120px' } }),
        render: val => val || '--',
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
    ];
    const insuranceColumns = [
      {
        title: '产品',
        dataIndex: 'assName',
        align: 'center',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        align: 'center',
      },
      {
        title: '缴纳账户',
        dataIndex: 'accoPlcyName',
        align: 'center',
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        align: 'center',
      },
      {
        title: '社保组合',
        dataIndex: 'grpName',
        align: 'center',
      },
      {
        title: '业务开始日期',
        dataIndex: 'begTime',
        align: 'center',
        render: val => (val && moment(val).format('YYYY-MM-DD')) || '无',
      },
    ];

    const assColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        align: 'center',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        render: val => (val && moment(val).format('YYYY-MM-DD')) || '无',
      },
    ];

    const pdSetFlagColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        sorter: (a, b) => new Date(b.startDate) - new Date(a.startDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-01') : '--'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '服务费',
        dataIndex: 'serAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'center',
        render: val => val || '--',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'center',
        render: val => val || '--',
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
    ];
    const insAccuColumns = [
      {
        title: '产品名称',
        dataIndex: 'assName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        rrender: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        align: 'center',
      },
    ];
    const quoColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        width: '150px',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
    ];
    const chargeDtodataSource = chargeDto && chargeDto.pdChargeDtos ? chargeDto.pdChargeDtos : [];
    console.log('chargeDtodataSource: ', chargeDtodataSource);

    const popoverContent = (
      <div style={{ width: 160 }}>
        递交情况
        <span style={{ float: 'right' }}>
          <Badge
            status="default"
            text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>}
          />
        </span>
        <div style={{ marginTop: 4 }}>耗时：2小时25分钟</div>
      </div>
    );

    const customDot = (dot, { status }) =>
      // console.log('dot, { status ,index ', dot, status, index)
      status === 'process' ? (
        <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
          {dot}
        </Popover>
      ) : (
        dot
      );
    // 是否含有材料信息
    const isShowMat = () => {
      if (coltFlag) {
        if (String(coltFlag) === '1') {
          return dataDtos && dataDtos.length ? (
            <DescriptionList>
              {dataDtos.map(item => (
                <Description
                  key={item.inpType}
                  term={item.matName}
                  style={{ wordBreak: 'break-all' }}
                >
                  {this.getVal(item)}
                </Description>
              ))}
            </DescriptionList>
          ) : (
            '暂无数据'
          );
        }
        // 2020-11-5 要求将其他条件的换为暂无数据
        return '暂无数据';
        // <DescriptionList>
        //   <Description term="材料是否完整">不需要材料</Description>
        // </DescriptionList>
      }
      return true;
    };

    const contact = () => {
      console.log('dataList.contRecDtoList: ', dataList.contRecDtoList);
      return (
        <div>
          {dataList.contRecDtoList.map((item, index) => (
            <DescriptionList>
              {index !== 0 ? <Divider dashed /> : null}
              <Description term="联系方式">{item.contactInfo || '--'}</Description>
              {item.contactInfo === '短信' || item.contactInfo === '电话' ? (
                <Description term="联系电话">{item.contactMobile || '--'}</Description>
              ) : (
                <Description term="邮件">{item.email || '--'}</Description>
              )}
              <Description term="联系人">{item.contactPer || '--'}</Description>
              <Description term="联系时间">{item.contactTime || '--'}</Description>
              <Description term="联系内容">
                <span dangerouslySetInnerHTML={{ __html: item.remark || '--' }} />
              </Description>
            </DescriptionList>
          ))}
        </div>
      );
    };
    return (
      <Form>
        <PageHeaderWrapper>
          <Spin tip="Loading..." spinning={loading}>
            <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
              <Row type="flex" justify="space-around">
                <Col>
                  <Link href="#sendinfo" title="派单信息" />
                </Col>
                <Col>
                  <Link href="#basicinfo" title="基本信息" />
                </Col>
                {(taskSource === '3' || taskSource === '4') && (
                  <Col>
                    <Link href="#quoinfo" title="新增产品信息" />
                  </Col>
                )}
                {taskSource === '6' && (
                  <Col>
                    <Link href="#insuranceinfo" title="新增险种信息" />
                  </Col>
                )}
                {taskSource === '1' || taskSource === '2' ? (
                  <Col>
                    <Link href="#redemp" title="收费信息" />
                  </Col>
                ) : null}

                {serDto ? (
                  <Col>
                    <Link href="#socialsecurityinf" title="社保公积金信息" />
                  </Col>
                ) : null}

                {taskSource === '7' && (
                  <Col>
                    <Link href="#redass" title="减少险种信息" />
                  </Col>
                )}
                <Col>
                  <Link href="#responseLaborContMsg" title="合同信息" />
                </Col>
                {dataDtos && (
                  <Col>
                    <Link href="#materialinfor" title="材料信息" />
                  </Col>
                )}
                {execStatusDto && (
                  <Col>
                    <Link href="#executionstate" title="执行状态" />
                  </Col>
                )}

                {dataList.contRecDtoList ? (
                  <Col>
                    <Link href="#record" title="联系记录" />
                  </Col>
                ) : null}
                <Col>
                  <Link href="#remark" title="办理备注" />
                </Col>
                <Col>
                  <Link href="#proRecording" title="问题记录" />
                </Col>
              </Row>
            </Anchor>
            <Card title={<span>派单信息</span>} id="sendinfo">
              <DescriptionList>
                <Description key="sendCorpName" term="签约方">
                  {(responseAddAssSendDto && responseAddAssSendDto.sendCorpName) || '--'}
                </Description>
                <Description key="custName" term="客户名称">
                  {(responseAddAssSendDto && responseAddAssSendDto.custName) || '--'}
                </Description>
                <Description key="custContName" term="商务合同">
                  {(responseAddAssSendDto && responseAddAssSendDto.custContName) || '--'}
                </Description>
                <Description key="quoName" term="报价单">
                  {(responseAddAssSendDto && responseAddAssSendDto.quoName) || '--'}
                </Description>
                <Description key="sendDate" term="派单时间">
                  {(responseAddAssSendDto &&
                    responseAddAssSendDto.sendDate &&
                    moment(responseAddAssSendDto.sendDate).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
                {/* <Description term="最后一次修改时间">
                  {(responseAddAssSendDto &&
                    responseAddAssSendDto.sendOperTime &&
                    moment(responseAddAssSendDto.sendOperTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description> */}
                <Description key="primName" term="所属客服">
                  {(responseAddAssSendDto && responseAddAssSendDto.primName) || '--'}
                </Description>
                <Description key="creName" term="创建人">
                  {(responseAddAssSendDto && responseAddAssSendDto.creName) || '--'}
                </Description>
              </DescriptionList>
            </Card>
            <Card title={<span>基本信息</span>} id="basicinfo">
              <DescriptionList>
                <Description key="empName" term="姓名">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.empName) || '--'}
                </Description>
                <Description key="idTypeName" term="证件类型">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.idTypeName) || '--'}
                </Description>
                <Description key="idCode" term="证件号">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.idCode) || '--'}
                </Description>
                <Description key="genderName" term="性别">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.genderName) || '--'}
                </Description>
                <Description key="nationName" term="国籍">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.nationName) || '--'}
                </Description>
                <Description key="birthDate" term="出生日期">
                  {(responseAddAssBaseDto &&
                    responseAddAssBaseDto.birthDate &&
                    moment(responseAddAssBaseDto.birthDate).format('YYYY-MM-DD')) ||
                    '--'}
                </Description>
                <Description key="mobile" term="电话">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.mobile) || '--'}
                </Description>
                <Description key="email" term="员工邮箱">
                  {(responseAddAssBaseDto && responseAddAssBaseDto.email) || '--'}
                </Description>
              </DescriptionList>
            </Card>

            {taskSource === '1' || taskSource === '2' ? (
              <Card title={<span>收费信息</span>} id="redemp">
                {chargeDto ? (
                  <DescriptionList>
                    <Description term="入职日期">
                      {(chargeDto.entryDate && moment(chargeDto.entryDate).format('YYYY-MM-DD')) ||
                        '--'}
                    </Description>

                    {chargeDto.pdSetFlag === 1 ? null : (
                      <Description term="业务开始日期">
                        {(chargeDto.sendBeginDate &&
                          moment(chargeDto.sendBeginDate).format('YYYY-MM-DD')) ||
                          '--'}
                      </Description>
                    )}

                    {/* <Description term="收费开始年月">
                      {chargeDto.chrgBeginDate
                        ? moment(chargeDto.chrgBeginDate).format('YYYY-MM')
                        : '--'}
                    </Description> */}
                    <Description term="是否员工联系">{chargeDto.conEmpFlag || '--'}</Description>

                    {chargeDto.pdSetFlag === 2 ? (
                      <Description term="执行地区">
                        {chargeDto.allChargeDto && chargeDto.allChargeDto.cityName
                          ? chargeDto.allChargeDto.cityName
                          : '--'}
                      </Description>
                    ) : null}
                    {chargeDto.pdSetFlag === 2 ? (
                      <Description term="执行方">
                        {chargeDto.allChargeDto && chargeDto.allChargeDto.execType
                          ? chargeDto.allChargeDto.execType
                          : '--'}
                      </Description>
                    ) : null}
                    <Description term="所属成本中心">
                      {chargeDto.costCenterName || '--'}
                    </Description>
                    <Table
                      dataSource={chargeDtodataSource}
                      columns={pdSetFlagColumns}
                      rowKey={record => record.serAmo}
                      loading={loading}
                      pagination={false}
                      style={{ margin: '12px 12px', width: '100%' }}
                    />
                  </DescriptionList>
                ) : (
                  '暂无数据'
                )}
              </Card>
            ) : null}
            {(taskSource === '3' || taskSource === '4') && (
              <Card title="新增产品信息" id="quoinfo">
                {changeQuoDto ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 20 }}>
                      <Description term="操作人">{changeQuoDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(changeQuoDto.operTime &&
                          moment(changeQuoDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      dataSource={changeQuoDto.dets || []}
                      columns={quoColumns}
                      rowKey="id"
                      defaultExpandAllRows
                      pagination={false}
                      style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}

            {taskSource === '6' && (
              <Card title={<span>新增险种信息</span>} id="redemp">
                {responseAddAssDto ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 20 }}>
                      <Description term="操作人">{responseAddAssDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(responseAddAssDto.operTime &&
                          moment(responseAddAssDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      dataSource={responseAddAssDto.assDetailDtoList || []}
                      columns={insuranceColumns}
                      rowKey="id"
                      defaultExpandAllRows
                      pagination={false}
                      // style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}

            {/* 社保公积金信息  暂不考虑五险合不合一 */}
            {serDto && (
              <Card title={<span id="socialsecurityinf">社保公积金信息</span>}>
                {/* <div style={{ position: 'absolute', right: 32, top: 18 }}>
                  <a onClick={this.detailed}>缴纳明细</a>
                </div> */}
                <Table
                  dataSource={serDto.detailSerDtos || []}
                  columns={insAccuInfoColumns}
                  rowKey={record => JSON.stringify(record)}
                  pagination={false}
                  scroll={scroll}
                />
              </Card>
            )}
            {dataDtos && (
              <Card title={<span id="responseLaborContMsg">合同信息</span>}>
                {responseLaborCont && +responseLaborCont.serType === 1? (
                  <DescriptionList>
                    <Description term="合同签订日期">
                      {(responseLaborCont && responseLaborCont.signDate && moment(responseLaborCont.signDate).format('YYYY-MM-DD')) || '--'}
                    </Description>

                    <Description term="是否已签订电子劳动合同">
                      {(responseLaborCont && responseLaborCont.electrSignFlagName) || '--'}
                    </Description>

                    <Description term="岗位">
                      {(responseLaborCont && responseLaborCont.wkJob) || '--'}
                    </Description>

                    <Description term="有无固定期限">
                      {(responseLaborCont && responseLaborCont.fixedDeadlnFlagName) || '--'}
                    </Description>

                    <Description term="合同开始日期">
                      {(responseLaborCont && responseLaborCont.contBeginDate && moment(responseLaborCont.contBeginDate).format('YYYY-MM-DD')) || '--'}
                    </Description>

                    <Description term="合同结束日期">
                      {(responseLaborCont && responseLaborCont.contEndDate && moment(responseLaborCont.contEndDate).format('YYYY-MM-DD')) || '--'}
                    </Description>

                    <Description term="合同期劳动报酬">
                      {(responseLaborCont && responseLaborCont.contWage) || '--'}
                    </Description>
                    
                  </DescriptionList>
                    ): responseLaborCont ? (
                      <DescriptionList>
                        <Description term="合同签署方式">
                          {(responseLaborCont && responseLaborCont.contSignWayName) || '--'}
                        </Description>

                        <Description term="合同类型">
                          {(responseLaborCont && responseLaborCont.contTypeName) || '--'}
                        </Description>

                        <Description term="合同签订日期">
                          {(responseLaborCont && responseLaborCont.signDate &&moment(responseLaborCont.signDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="是否已签订电子劳动合同">
                          {(responseLaborCont && responseLaborCont.electrSignFlagName) || '--'}
                        </Description>

                        <Description term="岗位">
                          {(responseLaborCont &&responseLaborCont.wkJob) || '--'}
                        </Description>

                        <Description term="合同编号">
                          {(responseLaborCont && responseLaborCont.contNo) || '--'}
                        </Description>

                        <Description term="有无固定期限">
                          {(responseLaborCont && responseLaborCont.contWage) || '--'}
                        </Description>
                        
                        <Description term="合同开始日期">
                          {(responseLaborCont && responseLaborCont.contBeginDate && moment(responseLaborCont.contBeginDate).format('YYYY-MM-DD')) || '--'}
                        </Description>
                        
                        <Description term="合同结束日期">
                          {(responseLaborCont && responseLaborCont.contEndDate && moment(responseLaborCont.contEndDate).format('YYYY-MM-DD')) || '--'}
                        </Description>
                        
                        <Description term="有无试用期">
                          {(responseLaborCont && responseLaborCont.probtnFlagName) || '--'}
                        </Description>

                        <Description term="试用期开始时间">
                          {(responseLaborCont && responseLaborCont.probtnBeginDate&&moment(responseLaborCont.probtnBeginDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="试用期结束时间">
                          {(responseLaborCont && responseLaborCont.probtnEndDate &&moment(responseLaborCont.probtnEndDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="合同期劳动报酬">
                          {(responseLaborCont && responseLaborCont.contWage) || '--'}
                        </Description>

                        <Description term="试用期劳动报酬">
                          {(responseLaborCont && responseLaborCont.probtnWage) || '--'}
                        </Description>

                        <Description term="工时">
                          {(responseLaborCont && responseLaborCont.laborHourName) || '--'}
                        </Description>

                        <Description term="工作地点">
                          {(responseLaborCont && responseLaborCont.wkLoc) || '--'}
                        </Description>

                        <Description term="工作内容">
                          {(responseLaborCont && responseLaborCont.wkContent) || '--'}
                        </Description>

                        <Description term="是否做入职体检">
                          {(responseLaborCont && responseLaborCont.entryMedExamFlagName) || '--'}
                        </Description>

                      </DescriptionList>
                    ): ('暂无数据')}
              </Card>
            )}
            
            {dataDtos && (
              <Card title={<span id="materialinfor">材料信息</span>}>{isShowMat()}</Card>
            )}

            {execStatusDto && (
              <Card title={<span id="executionstate">执行状态</span>}>
                {execStatusDto.leafList && execStatusDto.leafList.length ? (
                  <Steps
                    direction={stepDirection}
                    progressDot={customDot}
                    style={{ width: '60%', margin: '0 auto', marginTop: 20 }}
                  >
                    {execStatusDto &&
                      execStatusDto.leafList.map(item => (
                        <Step
                          key={item.operLeafType}
                          title={item.operLeafTypeName}
                          description={
                            !item.leafDetList.length ? (
                              `暂无${item.operLeafType === '3' ? '办理' : '申报'}内容`
                            ) : (
                              <div style={{ width: 400, fontSize: 12, textAlign: 'left' }}>
                                {item.leafDetList.map(leafDet => (
                                  <div key={leafDet.leafDetId}>
                                    <Badge
                                      status={
                                        item.operLeafType === 4
                                          ? leafDet.doneFlag === 3
                                            ? 'success'
                                            : 'default'
                                          : leafDet.doneFlag === 1
                                          ? 'success'
                                          : 'default'
                                      }
                                      text={
                                        <span style={{ lineHeight: '30px' }}>
                                          {leafDet.leafDetTypeName}&nbsp;
                                          <span style={{ color: '#999' }}>
                                            {leafDet.cityName ? `(${leafDet.cityName})` : ''}
                                          </span>
                                          &nbsp;:{leafDet.doneFlagName || '--'}
                                          <span
                                            style={{
                                              fontSize: '12px',
                                              color: '#999',
                                              marginLeft: 15,
                                            }}
                                          >
                                            {leafDet.operTime &&
                                              moment(leafDet.operTime).format('YYYY-MM-DD')}
                                          </span>
                                        </span>
                                      }
                                    />
                                    <br />
                                  </div>
                                ))}
                              </div>
                            )
                          }
                          status={item.doneFlag === 1 ? 'finish' : 'wait'}
                        />
                      ))}
                  </Steps>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}

            <div>
              {dataList.contRecDtoList ? (
                <Card title={<span id="contactrecord">联系记录</span>}>
                  <div>{contact()}</div>
                </Card>
              ) : null}
            </div>

            {/* 减少险种：已有险种信息 */}
            {taskSource === '7' && (
              <Card title={<span>减少险种信息</span>} id="redass">
                {responseDeduAssDto.operTime ? (
                  <div>
                    <DescriptionList>
                      <Description term="停做原因">
                        {responseDeduAssDto.deduReasonName || '--'}
                      </Description>
                      <Description term="操作人">{responseDeduAssDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(responseDeduAssDto.operTime &&
                          moment(responseDeduAssDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      columns={assColumns}
                      dataSource={responseDeduAssDto.assDetailDtoList || []}
                      rowKey={(_, index) => index}
                      bordered
                      pagination={false}
                      style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}
            <div id="remark">
              <HdlRemark hdlRemark={handDto} />
            </div>
            <div id="proRecording">
              <ProRecording proRecording={proRecord} />
            </div>
            <Modal
              width="1200px"
              visible={maistrue}
              onCancel={this.handleOk}
              title="社保公积金明细"
              footer={[
                <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                  关闭
                </Button>,
              ]}
            >
              <Card>
                <Table
                  dataSource={dataDetailed}
                  columns={insAccuColumns}
                  rowKey={record => record.serSetId}
                  loading={loading}
                  pagination={false}
                  // pagination={moreFlagList[parseInt(activeKey) - 1] == '2' ? false : pagination}
                />
              </Card>
            </Modal>
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={() => router.goBack()}>返回</Button>
            </FooterToolbar>
            {/* 社保账户详情弹框 */}
            <InsAccoModal
              onRef={ref => {
                this.insDetail = ref;
              }}
            />
            {/* 公积金账户详情弹框 */}
            <AccuAccoModal
              onRef={ref => {
                this.accuDetail = ref;
              }}
            />
            {/* 工伤二级户详情弹框 */}
            <InjSecAccoDetailModal
              onRef={ref => {
                this.injSecAccoDetail = ref;
              }}
            />
            {/* 政策组合详情弹框 */}
            {policyVisible ? (
              <Policy
                plcyId={plcyId}
                accuOrIns={accuOrIns}
                areaId={cityId} // 城市
                pdId={pdId} // 产品和险种的id
                cancelPolicyModal={modalClose => this.cancelPolicyModal(modalClose)}
              />
            ) : null}
          </Spin>
        </PageHeaderWrapper>
      </Form>
    );
  }
}

export default AddEmployeeDetail;
